<template>
  <div>
    <head-top routerName="shelvesSetMeal" title="上架套餐"></head-top>
    <div class="content-wrap">
      <div class="back">
        <div class="relative">
          <div class="title">免上架手续套餐</div>
          <div class="activity">10<span>个</span></div>
          <ul>
            <li>
              <div class="label">元宝</div>
              <div class="data">99个</div>
            </li>
            <li>
              <div class="label">使用期限</div>
              <div class="data">90天</div>
            </li>
            <li>
              <div class="label">上架商品个数</div>
              <div class="data">10个</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="button" @click="$refs.password.show()">立即兑换</div>
    </div>
    <password-input ref="password" @BuyData="submit"></password-input>
  </div>
</template>
<script>
import HeadTop from "@/components/head";
import { Toast } from "vant";
import { goodsVip } from "@/api/shelvesSetMeal";
import md5 from "js-md5";
export default {
  components: {
    [Toast.name]: Toast,
    HeadTop,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
  },
  methods: {
    submit(Password) {
      goodsVip({ payPassword: md5(Password) }).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          Toast.success(res.data.errorMessage);
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./css.less";
.content-wrap {
  .back {
    background: #6c61d4;
    .activity {
      font-size: 52px;
    }
  }
  .button {
    margin: 215px auto 0 auto;
    width: 308px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: #333333;
    border-radius: 2px;
  }
}
</style>